<script setup lang="ts">
import { reactive, provide, onMounted } from 'vue';
import FooterTabbar from '@/components/FooterTabbar.vue'
import TaskList from '@/components/list/TaskList.vue'
import Banner from './components/Banner.vue'
import citySwitch from './components/citySwitch.vue'
import PositionType from './components/PositionType.vue'
import Screen from './components/Screen.vue'
import { taskStore } from '@/store/task'
import { taskAllListAPI } from "@/api/task";
import { Toast } from 'vant';
import { useRouter } from 'vue-router';

const router = useRouter()
const store = taskStore()

const state = reactive({
    citySwitchBool: false,
    positionTypeBool: false,
    screenBool: false,
    serviceMode: '',
    taskCycle: '',
    pageNum: 0,
    pageSize: 10,
    taskList: [],
    finished: false,
    loading: false,
})

// 获取任务列表
const getTaskAllList = async() => {
    state.loading = true
    if (state.pageNum == 1) state.taskList = []
    const res = await taskAllListAPI({
        position_name: store.positionVal, // 职位类型
        service_mode: state.serviceMode, // 服务方式
        task_cycle: state.taskCycle, //任务周期
        pageNum: state.pageNum, // 分页页码
        pageSize: state.pageSize, // 每一页多少条数据
        city: store.cityVal, // 城市查询
    })
    if (res) {
        // 拼接后面请求的内容
        state.taskList = state.taskList.concat(res.records)      
        state.loading = false
        // 判断是否加载完毕
        if (state.taskList.length >= res.total) {
            state.finished = true
        }else{
            state.finished = false
        }
    }else{
        Toast('任务列表查询失败')
        state.loading = false
    }
}
// 关闭 切换城市 弹窗方法
const closeCitySwitch = (name: String) => {
    if (name) {
        store.setCityVal(name)
        onRefresh()
    }
    state.citySwitchBool = false
}
// 关闭 切换职位 弹窗方法
const closePositionType = (position: any) => {
    if (position) {
        store.setPositionVal(position)
        onRefresh()
    }
    state.positionTypeBool = false
}
// 关闭 切换screen 弹窗方法
const closeScreen = (screen: { mode: string; circle: string; }) => {
    // 获取筛选的数据
    if (screen) {
        state.serviceMode = screen.mode
        state.taskCycle = screen.circle
        onRefresh()
    }
    state.screenBool = false
}
// 跨层传递 关闭弹框方法
provide('closeCitySwitch',closeCitySwitch)
provide('closePositionType',closePositionType)
provide('closeScreen', closeScreen)

const onLoad = () => {
    state.pageNum = state.pageNum + 1
    getTaskAllList()
}
const onRefresh = () => {
    state.pageNum = 1
    getTaskAllList()
}

</script>

<template>
    <div class="task-page">
        <div class="task-top">
            <div class="task-top-city" @click="state.citySwitchBool = true">
                <i></i>
                <strong>{{ store.cityVal }}</strong>
                <span></span>
            </div>
            <input type="text" readonly placeholder="请输入想要搜索的内容" @click="router.push('/task/search')">
            <router-link to="/message/systemList" class="task-icon-message"></router-link>
        </div>
        <Banner/>
        <div class="task-title">
            <h3>最新任务</h3>
            <div class="task-position-pop" @click="state.positionTypeBool = true">{{ store.positionVal || '职位选择'}}<span></span></div>
            <div class="task-position-pop" @click="state.screenBool = true" >筛选<span></span></div>
        </div>
        <van-pull-refresh v-model="state.loading" @refresh="onRefresh">     
            <van-list
                v-model:loading="state.loading"
                :finished="state.finished"
                finished-text=""
                @load="onLoad"
            >
                <TaskList :taskList="state.taskList"/>
                <div class="wy-no-data" v-if="!state.loading && state.taskList.length==0">暂无数据</div>
            </van-list>
        </van-pull-refresh>
        <!-- 切换城市 弹窗 -->
        <van-popup 
            v-model:show="state.citySwitchBool" 
            position="top"
            duration="0"
            :style="{ height: '100%', width: '100%' }" 
        >
            <citySwitch />
        </van-popup>
        <!-- 切换职位 弹窗 -->
        <van-popup 
            v-model:show="state.positionTypeBool" 
            position="top"
            duration="0"
            :style="{ height: '100%', width: '100%' }" 
        >
            <PositionType />
        </van-popup>
         <!-- 切换筛选 弹窗 -->
         <van-popup 
            v-model:show="state.screenBool" 
            position="top"
            duration="0"
            :style="{ height: '100%', width: '100%' }" 
        >
            <Screen />
        </van-popup>
    </div>
    <FooterTabbar />
</template>


<style scoped>

.task-page {
    background: #f9f9f9;
    padding: 0 0.59rem 3rem;
    min-height: calc(100vh - 3rem);
}
.task-top {
    display: flex;
    align-items: center;
    padding: 0.5rem 0 0.91rem;
}
.task-top-city {
    display: flex;
    align-items: center;
}
.task-top-city i{
    width: 1.04rem;
    height: 1.01rem;
    background: url('@/assets/img/icon/icon-place.png') no-repeat;
    background-size: 100%;
}
.task-top-city span {
    margin: 0 0.6rem 0 0.2rem;
    display: inline-block;
    border-left: 0.18rem solid transparent;
    border-right: 0.18rem solid transparent;
    border-top: 0.36rem solid #333;
}
.task-top input {
    flex: 1;
    height: 1.71rem;
    background: #e9e9e9 url('@/assets/img/icon/icon-search.png') 0.35rem 0.3rem no-repeat;
    background-size: 9%;
    border: 0.03px solid #ededed;
    border-radius: 0.85rem;
    font-size: 0.69rem;
    font-weight: 300;
    color: #999;
    padding-left: 1.8rem;
}
.task-icon-message {
    width: 1.31rem;
    height: 1.28rem;
    background: url('@/assets/img/icon/icon-remind.png') no-repeat;
    background-size: 100%;
    margin-left: 0.27rem;
}
.task-title {
    display: flex;
    align-items: center;
    margin-bottom: 0.67rem;
    margin-top: 1.44rem;
}
.task-title h3 {
    flex: 1;
    font-size: 0.96rem;
    line-height: 0.96rem;
    font-weight: bold;
    color:#666666;
}
.task-position-pop, .task-screen-pop {
    margin-left: 0.56rem;
    font-size: 0.75rem;
    font-weight: 300;
    color: #666;
    margin-left: 0.56rem;
}
.task-position-pop span, .task-screen-pop span {
    display: inline-block;
    border-left: 0.18rem solid transparent;
    border-right: 0.18rem solid transparent;
    border-top: 0.36rem solid #333;
    margin-left: 0.25rem;
}
</style>